<template>
  <!-- 收藏列表 -->
  <view class="container">
    <NavBar
      title="收藏列表"
      :right-text="total ? rightText : ''"
      @rightTextClick="rightTextClick"
    />
    <view class="download_page">
      <view class="bnts">
        <view
          v-for="(i, index) in btnsArr"
          :key="index"
          :class="index == isActive ? 'active' : ''"
          @click="clickItem(index)"
        >
          <text>{{ i.title }}</text>
        </view>
      </view>
      <view class="video_list" v-if="total">
        <!-- 视频列表 -->
        <view
          class="video_item"
          v-if="params.learningType == 1"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <radio-group
            v-if="isShowCheckBox"
            class="checkbox_group"
            :data-item="item"
            @change="checkboxChange"
          >
            <label>
              <radio :value="index" :checked="item.isChoose" color="#0b847b" />
            </label>
          </radio-group>
          <collectinVideo :itemObj="item" @click="previewVideo(item)" />
        </view>

        <!-- 文档资料 -->
        <view
          class="video_item2"
          v-if="params.learningType == 2"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <radio-group
            v-if="isShowCheckBox"
            class="checkbox_group"
            :data-item="item"
            @change="checkboxChange"
          >
            <label>
              <radio :value="index" :checked="item.isChoose" color="#0b847b" />
            </label>
          </radio-group>

          <FileItem
            class="file_item"
            :itemObj="item"
            @click="previewFile(item)"
          />
        </view>

        <!-- 电子图书 -->
        <view
          class="video_item3"
          v-if="params.learningType == 3"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <radio-group
            v-if="isShowCheckBox"
            class="checkbox_group"
            :data-item="item"
            @change="checkboxChange"
          >
            <label>
              <radio :value="index" :checked="item.isChoose" color="#0b847b" />
            </label>
          </radio-group>

          <EBooks class="e_books" :itemObj="item" @click="previewFile(item)" />
        </view>

        <!-- 专题学习 -->
        <view
          class="video_item4"
          v-if="params.learningType == 4"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <radio-group
            v-if="isShowCheckBox"
            class="checkbox_group"
            :data-item="item"
            @change="checkboxChange"
          >
            <label>
              <radio :value="index" :checked="item.isChoose" color="#0b847b" />
            </label>
          </radio-group>

          <Special
            class="special_item"
            :itemObj="item"
            @click="previewFile(item)"
          />
        </view>
      </view>
      <view class="video_list" v-else>
        <NoData />
      </view>
    </view>
    <view class="all-delall-btn" v-if="isShowCheckBox">
      <radio-group :data-item="item" @change="checkAll">
        <label>
          <radio value="allChoose" :checked="isAllChoose" color="#0b847b" />
          <text v-if="isAllChoose"> 全不选 </text>
          <text v-else> 全选 </text>
        </label>
      </radio-group>
      <button
        type="warn"
        style="background: #e86565"
        @click="delAllFn"
        class="del-btn"
        :disabled="!delArr.length"
      >
        删除
      </button>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import NoData from "@/components/NoData.vue";
import collectinVideo from "./common/collectinVideo.vue";

import FileItem from "./common/file_item.vue"; // 文档资料
import EBooks from "./common/EBooks.vue"; // 电子图书
import Special from "./common/special.vue"; // 专题学习

import { getDateFn } from "../../utils/fun.js";

import {
  apiDelCollection, // 9 取消收藏
  apiCollectionList, // 10 收藏列表
} from "@/net/educationalLearning.js";

export default {
  components: {
    NavBar,
    NoData,
    collectinVideo,
    FileItem,
    EBooks,
    Special,
  },
  data() {
    return {
      isAllChoose: false,
      delArr: [], //删除元素id
      rightTextColor: "red",
      rightText: "删除",
      isShowCheckBox: false,
      total: 0,
      videoList: [],
      params: {
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        pageSize: 10,
        pageNum: 1,
        learningType: 1,
        djDeptId: JSON.parse(uni.getStorageSync("loginUserInfo")).deptId,
      },
      isActive: 0,
      btnsArr: [
        {
          title: "视频学习",
          type: 1,
        },
        {
          title: "文档资料",
          type: 2,
        },
        {
          title: "电子图书",
          type: 3,
        },
        {
          title: "专题学习",
          type: 4,
        },
      ],
    };
  },

  onShow(options) {
    this.init();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.total = 0;
    this.params.pageNum = 1;
    this.videoList = [];
    this.getCollectionList();
  },
  // 上拉加载
  onReachBottom() {
    if (this.params.pageNum * this.params.pageSize > this.total) {
      uni.showToast({
        title: "数据全部加载",
        duration: 2000,
      });
    } else {
      this.params.pageNum++;
      this.getCollectionList();
    }
  },

  methods: {
    // 预览文档资料
    previewFile(item) {
      let params = {
        ...item,
        flag: false,
      };
      if (item.learningType == 2) {
        params.Type = "文档资料";
      } else if (item.learningType == 3) {
        params.Type = "电子图书";
      } else if (item.learningType == 4) {
        params.Type = "专题学习";
      }
      uni.setStorage({
        key: "itemParams",
        data: JSON.stringify(params),
      });
      uni.navigateTo({
        url: `./historyInfo`,
      });
    },

    // 删除
    delAllFn() {
      let data = this.delArr.join(",");

      apiDelCollection(data)
        .then((res) => {
          this.params.pageNum = 1;
          this.videoList = [];
          this.getCollectionList();
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
        })
        .catch((err) => {
          this.params.pageNum = 1;
          this.videoList = [];
          this.getCollectionList();
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
        });
    },
    // 全选
    checkAll(e) {
      console.log(e);
      this.isAllChoose = !this.isAllChoose;
      this.delArr = [];
      if (this.isAllChoose) {
        for (let i = 0; i < this.videoList.length; i++) {
          this.videoList[i].isChoose = true;
          this.delArr.push(this.videoList[i].collectId);
        }
      } else {
        for (let i = 0; i < this.videoList.length; i++) {
          this.videoList[i].isChoose = false;
        }
      }
    },

    // 删除选中复选框
    checkboxChange(e) {
      console.log(e.currentTarget.dataset.item);
      let index = e.detail.value;
      this.videoList[index].isChoose = !this.videoList[index].isChoose;

      let id = e.currentTarget.dataset.item.collectId;
      let isHas = this.delArr.indexOf(id) == -1 ? false : true;

      if (isHas) {
        for (let i = 0; i < this.delArr.length; i++) {
          if (id == this.delArr[i]) {
            this.delArr.splice(i, 1);
          }
        }
      } else {
        this.delArr.push(id);
      }
      this.isAllChoose =
        this.delArr.length == this.videoList.length ? true : false;
    },

    previewVideo(item) {
      uni.navigateTo({
        url: `./previewcollectionVideo?item=${JSON.stringify(item)}`,
      });
    },

    // 点击删除
    rightTextClick() {
      if (this.rightText == "删除") {
        this.rightText = "取消";
        this.isShowCheckBox = true;
      } else {
        this.rightText = "删除";
        this.isShowCheckBox = false;
        this.reset();
      }
      if (this.rightTextColor == "red") {
        this.rightTextColor = "#989898";
      } else {
        this.rightTextColor = "red";
      }
    },

    reset() {
      this.delArr = [];
      this.isAllChoose = false;
      this.rightText = "删除";
      this.isShowCheckBox = false;
      this.rightTextColor = "red";
      for (let i = 0; i < this.videoList.length; i++) {
        this.videoList[i].isChoose = false;
      }
    },

    // 点击
    clickItem(index) {
      this.reset();

      if (index == this.isActive) {
        return;
      } else {
        this.isActive = index;
        this.params.learningType = Number(index) + 1;
        this.total = 0;
        this.videoList = [];
        this.getCollectionList();
      }
    },

    // 收藏列表
    getCollectionList() {
      apiCollectionList(this.params)
        .then((res) => {
          console.log(this.params);
          console.log(res);
          uni.stopPullDownRefresh();
          this.total = res.code === 0 ? res.total : 0;
          this.videoList = res.code == 0 ? this.videoList.concat(res.data) : [];
          for (let i = 0; i < this.videoList.length; i++) {
            this.videoList[i].isChoose = false;
            this.videoList[i].noShowNoRead = true; // 收藏列表页面不显示未读图表
            this.videoList[i].createTime = getDateFn(
              this.videoList[i].createTime
            );
          }
        })
        .catch((err) => {
          this.videoList = [];
        });
    },

    init() {
      this.total = 0;
      this.videoList = [];
      this.getCollectionList();
    },
  },
};
</script>

<style>
page {
  background: #f9f9f9;
}

.active {
  color: #0b847b;
  border-bottom: 4rpx solid #0b847b;
}

.bnts {
  width: 750rpx;
  height: 80rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 32rpx;
}

.bnts text {
  display: inline-flex;
  padding-bottom: 6rpx;
  box-sizing: border-box;
}

.video_list {
  width: 750rpx !important;
  height: 100%;
  margin: 0 18rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
}

.video_item,
.video_item2,
.video_item3,
.video_item4 {
  margin-bottom: 10rpx;
  position: relative;
  width: 100%;
}
.video_list {
  margin-bottom: 20rpx !important;
  margin-top: 20rpx !important;
}

.checkbox_group {
  position: absolute;
  top: 0;
  right: 20rpx;
  z-index: 10;
}

::v-deep .uni-checkbox-input {
  border-radius: 50%;
}

.all-delall-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  box-sizing: border-box;

  width: 750rpx;
  height: 120rpx;
  background: #ffffff;
  border-top: 1px solid #ebedf1;

  position: fixed;
  bottom: 0;
  z-index: 100;
}

.del-btn {
  margin: 0;
  width: 340rpx;
  height: 88rpx;
  background: #e86565;
  border-radius: 8rpx;
}

.file_item {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  box-sizing: border-box;
  position: relative !important;
  background: #fff;
}

.e_books {
  position: relative;
  /* width: 30%; */
}

.e_books:nth-child(3n-1) {
  margin: 0 32rpx;
}

.special_item {
  position: relative;
  width: 750rpx !important;
}
</style>
